<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example demonstrates the "autoColors" rendering mode of jqxTreeMap. In that mode, the color of each area depends on its "value" in the data source and the jqxTreeMap's "baseColor" and "colorRange" properties. "baseColor" is the color that will vary in the automatic rendering. "colorRange" determines the range in which the base color can vary.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtreemap.js"></script>
<script>
$(function () {
    
    var data = [
        {
            label: 'USA',
            value: 104
        },
        {
            label: 'People\'s Republic of China',
            value: 88
        },
        {
            label: 'Great Britain',
            value: 65
        },
        {
            label: 'Russian Federation',
            value: 82
        },
        {
            label: 'Germany',
            value: 44
        },
        {
            label: 'Republic of Korea',
            value: 28
        },
        {
            label: 'France',
            value: 34
        },
        {
            label: 'Italy',
            value: 28
        },
        {
            label: 'Hungary',
            value: 17
        },
        {
            label: 'Australia',
            value: 35
        },
        {
            label: 'Japan',
            value: 38
        },
        {
            label: 'Kazakhstan',
            value: 13
        },
        {
            label: 'Netherlands',
            value: 20
        },
        {
            label: 'Ukraine',
            value: 20
        },
        {
            label: 'New Zealand',
            value: 13
        },
        {
            label: 'Cuba',
            value: 14
        }

    ];
    $('#treemap').jqxTreeMap({
        width: 670,
        height: 400,
        source: data, 
        colorRange: 100,       
        colorMode: 'autoColors',
        baseColor: '#52CBFF',
        legendScaleCallback: function (v) {
            v = v.toFixed(1);
            return v;
        },
        legendLabel: 'Olympic medal count - London 2012'
    });
});
</script>
<style>
.jqx-treemap-legend {
    background: rgba(0, 0, 0, 0.4);
}
</style>
</head>
<body>
<div id="treemap"></div>
</body>
</html>
